<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="generator" content="Hugo 0.82.0" />


<title>Rmarkdown 代码块修改中文注释斜体 - 宇飞的世界</title>
<meta property="og:title" content="Rmarkdown 代码块修改中文注释斜体 - 宇飞的世界">


  <link href='/favicon.ico' rel='icon' type='image/x-icon'/>



  








<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/github.min.css' rel='stylesheet' type='text/css' />



<link rel="stylesheet" href="/css/fonts.css" media="all">
<link rel="stylesheet" href="/css/main.css" media="all">



  </head>
  <body>
    <div class="wrapper">
      <header class="header">
        <nav class="nav">
  <a href="/" class="nav-logo">
    <img src="/images/logo.png"
         width="50"
         height="50"
         alt="Logo">
  </a>

  <ul class="nav-links">
    
    <li><a href="/about/">About</a></li>
    
    <li><a href="/categories/">Categories</a></li>
    
    <li><a href="/tags/">Tags</a></li>
    
    <li><a href="http://www.zhongyufei.com/Rbook/_book">R study</a></li>
    
  </ul>
</nav>

      </header>


<main class="content" role="main">

  <article class="article">
    
    <span class="article-duration">1 min read</span>
    

    <h1 class="article-title">Rmarkdown 代码块修改中文注释斜体</h1>

    
    <span class="article-date">2021-06-03</span>
    

    <div class="article-content">
      <h2 id="前言">前言</h2>
<p>最近在使用 R 包 bookdown 写 “商业数据分-R语言处理数据”的<a href="https://bookdown.org/zhongyufei/Data-Handling-in-R/">笔记</a>，在我写的过程中发现，渲染后book中代码块的中文注释是斜体，显得很难看。如下所示：</p>
<p><img src="https://gitee.com/zhongyufei/photo-bed/raw/pic/img/2021-06-01_171115-1622705407654.png" alt="代码块中文斜体"></p>
<blockquote>
<p>欢迎大家查阅笔记，并提出意见</p>
</blockquote>
<p>在发现问题后，搜索一圈，但并没有找到我想要的资料，可能是我搜索方式不对。中文搜索引擎搜&quot;代码块中文注释斜体&quot;，能搜索到一些 vscode 相关文章。用 google 搜 “bookdown comment font style”，搜索结果基本都是谢益辉大神关于rmarkdown或bookdown相关的书。</p>
<p>但是我看到一些资料后，让我大概知道我需要解决的问题，也就是关于css文件的修改。但是我对css文件毫无认知。最后通过查看渲染后的html文件，找到了解决办法，现记录如下。</p>
<h2 id="bookdown">bookdown</h2>
<p>在我们使用 bookdown 创建项目后，生成的项目文件中有一个名叫 style.css 的文件，我们修改该文件即可。</p>
<p><img src="https://gitee.com/zhongyufei/photo-bed/raw/pic/img/bookdown-%E5%88%9D%E5%A7%8B-%E6%96%87%E4%BB%B6%E6%A0%91-1622539879663.png" alt="bookdown-文件树"></p>
<p>打开 style.css，在最后添加即可。</p>
<pre><code>code span.co { 
    color: #60a0b0;
    font-style: normal;
 }
</code></pre><p>完整 style.css 如下所示：</p>
<pre><code>p.caption {
  color: #777;
  margin-top: 10px;
}
p code {
  white-space: inherit;
}
pre {
  word-break: normal;
  word-wrap: normal;
}
pre code {
  white-space: inherit;
}
code span.co { 
    color: #60a0b0;
    font-style: normal;
 }
</code></pre><p>在修改完 style.css 文件后，重新渲染 book，即可正常(非斜体)显示注释，如下所示：</p>
<p><img src="https://gitee.com/zhongyufei/photo-bed/raw/pic/img/bookdown-font-normal.png" alt=""></p>
<h2 id="rmarkdown">Rmarkdown</h2>
<p>经过上面的修改，我记起Rmarkdown 中代码块注释同样是斜体，解决方法如下：</p>
<p><img src="https://gitee.com/zhongyufei/photo-bed/raw/pic/img/rmarkdown%E4%B8%AD%E6%96%87%E6%AD%A3%E5%B8%B8%E6%B3%A8%E9%87%8A-1622540428792.png" alt="rmarkdown中文正常注释"></p>
<p>首先自己配置一个 style.css 文件，注意  style.css 文件 和 Rmarkdown文件在统一路径下。css 文件如下：</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-css" data-lang="css"><span style="color:#75715e">/* 主要是将font-style 设置为normal */</span>
.<span style="color:#a6e22e">hljs-comment</span>{
  <span style="color:#66d9ef">font-family</span>: Microsoft YaHei ;
  <span style="color:#66d9ef">font-style</span>: <span style="color:#66d9ef">normal</span>;
}
</code></pre></div><p>再在 Rmarkdown 的 yaml 中引入 css 文件；</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-yaml" data-lang="yaml">---
<span style="color:#f92672">title</span>: <span style="color:#e6db74">&#34;Rmarkdown 中文注释&#34;</span>
<span style="color:#f92672">output</span>: 
  <span style="color:#f92672">html_document</span>:
    <span style="color:#f92672">css</span>: <span style="color:#e6db74">&#34;style.css&#34;</span>
---
</code></pre></div><p>至于为什么是添加这样的 css 格式？是因为我将生成的 html 用浏览器查看源码后发现由该标签控制(我甚至不知道怎么称呼)。如下所示：</p>
<p><img src="https://gitee.com/zhongyufei/photo-bed/raw/pic/img/html-rmarkdown%E4%B8%AD%E6%96%87%E6%B3%A8%E9%87%8A-1622541106681.png" alt=""></p>
<h2 id="blogdown">blogdown</h2>
<p>那我们在用 blogdown 写博文的时候，同样的问题该如何解决呢？通过在正文中引入 css 即可</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-html" data-lang="html">&lt;<span style="color:#f92672">html</span>&gt;
&lt;<span style="color:#f92672">style</span>&gt; 
.<span style="color:#a6e22e">hljs-comment</span>{
  <span style="color:#66d9ef">font-family</span>: Microsoft YaHei ;
  <span style="color:#66d9ef">font-style</span>: <span style="color:#66d9ef">normal</span>;
}
&lt;/<span style="color:#f92672">style</span>&gt;
&lt;/<span style="color:#f92672">html</span>&gt;
</code></pre></div><p><img src="https://gitee.com/zhongyufei/photo-bed/raw/pic/img/blogdown-comment-font-1622543101946.png" alt=""></p>
<h2 id="参考资料">参考资料</h2>
<p>以下网站打开可能需要翻墙。</p>
<ol>
<li>
<p><a href="https://bookdown.org/yihui/blogdown/css.html">https://bookdown.org/yihui/blogdown/css.html</a></p>
</li>
<li>
<p><a href="https://bookdown.org/yihui/rmarkdown-cookbook/html-css.html">https://bookdown.org/yihui/rmarkdown-cookbook/html-css.html</a></p>
</li>
<li>
<p><a href="https://bookdown.org/zhongyufei/Data-Handling-in-R/">https://bookdown.org/zhongyufei/Data-Handling-in-R/</a></p>
</li>
<li>
<p><a href="https://zhongyufei.netlify.app/">https://zhongyufei.netlify.app/</a></p>
</li>
</ol>

    </div>
  </article>

  


</main>

      <footer class="footer">
        <ul class="footer-links">
          <li>
            <a href="/index.xml" type="application/rss+xml" target="_blank">RSS feed</a>
          </li>
          <li>
            <a href="https://beian.miit.gov.cn/" target="_blank">粤ICP备20035539号</a>
          </li>
        </ul>
      </footer>

    </div>
    



<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>



<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/r.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/yaml.min.js"></script>
<script>hljs.configure({languages: []}); hljs.initHighlightingOnLoad();</script>



    

    
  </body>
</html>

